<template>
  <div class="charging-ranking">
    <div class="header">
      <span class="title">{{ title }}</span>
      <span @click="handleViewMore" class="view-more"
        >查看更多<i class="el-icon-arrow-right"></i
      ></span>
    </div>
    <div :id="id" class="charging-ranking-chart"></div>
    <GdRankDialog
      v-if="rankDialogVisible"
      :visible.sync="rankDialogVisible"
      :data="data"
      :title="rankDialogTitle"
    />
  </div>
</template>
<script>
import GdRankDialog from './GdRankDialog'
import * as echarts from 'echarts'
export default {
  name: 'ChargingRanking',
  components: {
    GdRankDialog,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      require: true,
    },
    id: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      chartList: [],
      rankDialogVisible: false,
      rankDialogTitle: '',
    }
  },
  watch: {
    data(val) {
      this.chartList = []
      this._handleChartData(val)
    },
  },
  methods: {
    _handleChartData(val) {
      let data = []
      let yAxisData = []
      let chartDom = document.getElementById(this.id)
      if (!chartDom) return
      let myChart = echarts.init(chartDom)
      for (let i = 0; i < val.length; i++) {
        if (i < 5) {
          data.push(val[i].val)
          yAxisData.push(
            val[i].name.length > 110
              ? val[i].name.substr(0, 8) + '...'
              : val[i].name
          )
        }
      }
      while (data.length < 5) {
        data.push(null)
        yAxisData.push('')
      }
      let option = {
        grid: {
          // show: true,
          // containLabel: true,
          top: 0,
          bottom: '20px',
          left: '80px',
          right: '100px',
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: 'category',
          data: yAxisData,
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: 'rgba(255, 255, 255, 0.8)',
            formatter: function (value) {
              return value
            },
            width: 80,
            overflow: 'truncate',
            align: 'right',
          },
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color:
                this.id == 'port-ranking'
                  ? new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 1, color: '#6DE3FD' },
                      { offset: 0, color: '#087E98' },
                    ])
                  : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 1, color: '#00618E' },
                      { offset: 0, color: '#3AC0FF' },
                    ]),
            },
            data: data,
            // showBackground: true,
            backgroundStyle: {
              color: '#1A3958',
            },
            barWidth: '40%',
            label: {
              show: true,
              color: '#F0F0F0',
              formatter: (obj) => {
                return obj.value + (this.id == 'port-ranking' ? '个' : '次')
              },
              position: 'right',
            },
          },
        ],
      }
      option && myChart.setOption(option)
      this.chartList.push(myChart)
    },
    _handleRezize() {
      this.$nextTick(() => {
        this.chartList.forEach((item) => item && item.resize())
      })
    },
    handleViewMore() {
      this.rankDialogVisible = true
    },
  },
  mounted() {
    this.rankDialogTitle = this.title.substring(
      0,
      this.title.lastIndexOf('Top5')
    )
  },
  activated() {
    window.addEventListener('resize', this._handleRezize)
  },
  deactivated() {
    window.removeEventListener('resize', this._handleRezize)
  },
  deystroyed() {
    window.removeEventListener('resize', this._handleRezize)
  },
}
</script>
<style lang="scss" scoped>
.charging-ranking {
  width: 100%;
  height: 27%;
  background: url(../../../assets/images/exhibition/rightbg1.png) center center
    no-repeat;
  background-size: 100% 100%;
  padding-left: 10px;
  position: relative;
  overflow: hidden;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    white-space: nowrap;
    .view-more {
      cursor: pointer;
      font-size: 14px;
      i {
        font-size: 12px;
        margin-right: 45px;
      }
    }
  }
  .charging-ranking-chart {
    width: 100%;
    height: calc(96% - 40px);
  }
}

@media screen and (max-width: 1440px) {
  .charging-ranking {
    padding-left: 2px;
    .header {
      .view-more {
        font-size: 12px;
      }
    }
  }
  .charging-ranking-chart {
    width: 100%;
    height: calc(96% - 30px);
  }
}
</style>
